<script setup lang="ts">
import type { Ref } from 'vue'
import type { EChartsOption } from 'echarts'
import { onMounted, ref, watch } from 'vue'
import { useECharts } from '@/hooks/useECharts'
import { storeToRefs } from 'pinia'
import { useTagsViewRoutes } from '@/stores/tagsViewRoutes'
import echarts from '@/utils/echarts'

const { isTagViewCurrenFull } = storeToRefs(useTagsViewRoutes())

// 统计图
const chartRef = ref<HTMLDivElement | null>(null)
const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>)

watch(
  () => isTagViewCurrenFull.value,
  () => {
    setTimeout(resize, 300)
  }
)

onMounted(() => {
  const option: EChartsOption = {
    title: {
      text: '地热开发利用',
      textStyle: { fontSize: 15 }
    },
    tooltip: { trigger: 'axis' },
    legend: { data: ['供温', '回温', '压力值(Mpa)'], right: 0 },
    grid: { top: 70, right: 80, bottom: 30, left: 80 },
    xAxis: [
      {
        type: 'category',
        data: ['1km', '2km', '3km', '4km', '5km', '6km'],
        boundaryGap: true,
        axisTick: { show: false }
      }
    ],
    yAxis: [
      {
        name: '供回温度(℃）',
        nameLocation: 'middle',
        nameTextStyle: { padding: [3, 4, 50, 6] },
        splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: { formatter: '{value} ' }
      },
      {
        name: '压力值(Mpa)',
        nameLocation: 'middle',
        nameTextStyle: { padding: [50, 4, 5, 6] },
        splitLine: { show: false },
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: { formatter: '{value} ' }
      }
    ],
    series: [
      {
        name: '供温',
        type: 'line',
        smooth: true,
        showSymbol: true,
        // 矢量画五角星
        symbol: 'path://M150 0 L80 175 L250 75 L50 75 L220 175 Z',
        symbolSize: 12,
        yAxisIndex: 0,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(250,180,101,0.3)' },
            { offset: 1, color: 'rgba(250,180,101,0)' }
          ]),
          shadowColor: 'rgba(250,180,101,0.2)',
          shadowBlur: 20
        },
        itemStyle: { color: '#FF8000' },
        // data中可以使用对象，value代表相应的值，另外可加入自定义的属性
        data: [1, 3, 4, 9, 3, 2]
      },
      {
        name: '回温',
        type: 'line',
        smooth: true,
        showSymbol: true,
        symbol: 'emptyCircle',
        symbolSize: 12,
        yAxisIndex: 0,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0, color: 'rgba(199, 237, 250,0.5)' },
              { offset: 1, color: 'rgba(199, 237, 250,0.2)' }
            ],
            false
          )
        },
        itemStyle: {
          color: '#3bbc86'
        },
        data: [31, 36, 54, 24, 73, 22]
      },
      {
        name: '压力值(Mpa)',
        type: 'bar',
        barWidth: 30,
        yAxisIndex: 1,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(108,80,243,0.3)' },
            { offset: 1, color: 'rgba(108,80,243,0)' }
          ]),
          //柱状图圆角
          borderRadius: [30, 30, 0, 0]
        },
        data: [11, 34, 54, 39, 63, 24]
      }
    ]
  }
  setOptions(option)
})
</script>

<template>
  <div style="height: 100%" ref="chartRef"></div>
</template>
